import React from 'react';
import { Link as RouterLink } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useTranslation } from 'react-i18next';
import {
  Box,
  Button,
  Container,
  Grid,
  Typography,
  Card,
  CardContent,
  CardMedia,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  Paper
} from '@mui/material';
import {
  Code as CodeIcon,
  School as SchoolIcon,
  Psychology as PsychologyIcon,
  CheckCircle as CheckCircleIcon
} from '@mui/icons-material';
import { RootState } from '../redux/store';

const Home: React.FC = () => {
  const { isAuthenticated } = useSelector((state: RootState) => state.auth);
  const { t } = useTranslation();

  return (
    <Box>
      {/* Hero Section */}
      <Paper
        sx={{
          position: 'relative',
          backgroundColor: 'primary.dark',
          color: '#fff',
          mb: 4,
          py: 8
        }}
      >
        <Box
          sx={{
            position: 'absolute',
            top: 0,
            bottom: 0,
            right: 0,
            left: 0,
            backgroundColor: 'rgba(0,0,0,.3)'
          }}
        />
        <Container maxWidth="lg">
          <Grid container>
            <Grid item md={8} xs={12}>
              <Box
                sx={{
                  position: 'relative',
                  p: { xs: 3, md: 6 }
                }}
              >
                <Typography component="h1" variant="h3" color="inherit" gutterBottom>
                  {t('app.subtitle')}
                </Typography>
                <Typography variant="h5" color="inherit" paragraph>
                  {t('app.description')}
                </Typography>
                <Button
                  component={RouterLink}
                  to={isAuthenticated ? '/dashboard' : '/register'}
                  variant="contained"
                  size="large"
                  sx={{ mt: 2 }}
                >
                  {isAuthenticated ? t('home.goToDashboard') : t('home.getStarted')}
                </Button>
              </Box>
            </Grid>
          </Grid>
        </Container>
      </Paper>

      {/* Features Section */}
      <Container maxWidth="lg" sx={{ mb: 8 }}>
        <Typography variant="h4" component="h2" gutterBottom textAlign="center">
          {t('features.title')}
        </Typography>
        <Grid container spacing={4} sx={{ mt: 2 }}>
          <Grid item xs={12} md={4}>
            <Card sx={{ height: '100%' }}>
              <CardMedia
                component="div"
                sx={{
                  pt: '56.25%',
                  backgroundColor: 'primary.light',
                  position: 'relative'
                }}
              >
                <Box
                  sx={{
                    position: 'absolute',
                    top: 0,
                    bottom: 0,
                    right: 0,
                    left: 0,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                  }}
                >
                  <SchoolIcon sx={{ fontSize: 80, color: 'white' }} />
                </Box>
              </CardMedia>
              <CardContent>
                <Typography gutterBottom variant="h5" component="h3">
                  {t('features.progressiveLearning.title')}
                </Typography>
                <Typography>
                  {t('features.progressiveLearning.description')}
                </Typography>
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={12} md={4}>
            <Card sx={{ height: '100%' }}>
              <CardMedia
                component="div"
                sx={{
                  pt: '56.25%',
                  backgroundColor: 'secondary.light',
                  position: 'relative'
                }}
              >
                <Box
                  sx={{
                    position: 'absolute',
                    top: 0,
                    bottom: 0,
                    right: 0,
                    left: 0,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                  }}
                >
                  <CodeIcon sx={{ fontSize: 80, color: 'white' }} />
                </Box>
              </CardMedia>
              <CardContent>
                <Typography gutterBottom variant="h5" component="h3">
                  {t('features.realWorldScenarios.title')}
                </Typography>
                <Typography>
                  {t('features.realWorldScenarios.description')}
                </Typography>
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={12} md={4}>
            <Card sx={{ height: '100%' }}>
              <CardMedia
                component="div"
                sx={{
                  pt: '56.25%',
                  backgroundColor: 'info.light',
                  position: 'relative'
                }}
              >
                <Box
                  sx={{
                    position: 'absolute',
                    top: 0,
                    bottom: 0,
                    right: 0,
                    left: 0,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                  }}
                >
                  <PsychologyIcon sx={{ fontSize: 80, color: 'white' }} />
                </Box>
              </CardMedia>
              <CardContent>
                <Typography gutterBottom variant="h5" component="h3">
                  {t('features.aiEvaluation.title')}
                </Typography>
                <Typography>
                  {t('features.aiEvaluation.description')}
                </Typography>
              </CardContent>
            </Card>
          </Grid>
        </Grid>
      </Container>

      {/* Pattern Categories Section */}
      <Box sx={{ bgcolor: 'background.paper', py: 8 }}>
        <Container maxWidth="lg">
          <Typography variant="h4" component="h2" gutterBottom textAlign="center">
            {t('patterns.categories.title')}
          </Typography>
          <Grid container spacing={4} sx={{ mt: 2 }}>
            <Grid item xs={12} md={4}>
              <Card>
                <CardContent>
                  <Typography variant="h5" component="h3" gutterBottom>
                    {t('patterns.categories.creational.title')}
                  </Typography>
                  <Typography variant="body2" color="text.secondary" paragraph>
                    {t('patterns.categories.creational.description')}
                  </Typography>
                  <List>
                    <ListItem>
                      <ListItemIcon>
                        <CheckCircleIcon color="primary" />
                      </ListItemIcon>
                      <ListItemText primary="Singleton" />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon>
                        <CheckCircleIcon color="primary" />
                      </ListItemIcon>
                      <ListItemText primary="Factory Method" />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon>
                        <CheckCircleIcon color="primary" />
                      </ListItemIcon>
                      <ListItemText primary="Abstract Factory" />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon>
                        <CheckCircleIcon color="primary" />
                      </ListItemIcon>
                      <ListItemText primary="Builder" />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon>
                        <CheckCircleIcon color="primary" />
                      </ListItemIcon>
                      <ListItemText primary="Prototype" />
                    </ListItem>
                  </List>
                </CardContent>
              </Card>
            </Grid>
            <Grid item xs={12} md={4}>
              <Card>
                <CardContent>
                  <Typography variant="h5" component="h3" gutterBottom>
                    {t('patterns.categories.structural.title')}
                  </Typography>
                  <Typography variant="body2" color="text.secondary" paragraph>
                    {t('patterns.categories.structural.description')}
                  </Typography>
                  <List>
                    <ListItem>
                      <ListItemIcon>
                        <CheckCircleIcon color="secondary" />
                      </ListItemIcon>
                      <ListItemText primary="Adapter" />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon>
                        <CheckCircleIcon color="secondary" />
                      </ListItemIcon>
                      <ListItemText primary="Bridge" />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon>
                        <CheckCircleIcon color="secondary" />
                      </ListItemIcon>
                      <ListItemText primary="Composite" />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon>
                        <CheckCircleIcon color="secondary" />
                      </ListItemIcon>
                      <ListItemText primary="Decorator" />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon>
                        <CheckCircleIcon color="secondary" />
                      </ListItemIcon>
                      <ListItemText primary="Facade" />
                    </ListItem>
                  </List>
                </CardContent>
              </Card>
            </Grid>
            <Grid item xs={12} md={4}>
              <Card>
                <CardContent>
                  <Typography variant="h5" component="h3" gutterBottom>
                    {t('patterns.categories.behavioral.title')}
                  </Typography>
                  <Typography variant="body2" color="text.secondary" paragraph>
                    {t('patterns.categories.behavioral.description')}
                  </Typography>
                  <List>
                    <ListItem>
                      <ListItemIcon>
                        <CheckCircleIcon color="info" />
                      </ListItemIcon>
                      <ListItemText primary="Observer" />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon>
                        <CheckCircleIcon color="info" />
                      </ListItemIcon>
                      <ListItemText primary="Strategy" />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon>
                        <CheckCircleIcon color="info" />
                      </ListItemIcon>
                      <ListItemText primary="Command" />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon>
                        <CheckCircleIcon color="info" />
                      </ListItemIcon>
                      <ListItemText primary="Template Method" />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon>
                        <CheckCircleIcon color="info" />
                      </ListItemIcon>
                      <ListItemText primary="Iterator" />
                    </ListItem>
                  </List>
                </CardContent>
              </Card>
            </Grid>
          </Grid>
        </Container>
      </Box>

      {/* Call to Action */}
      <Container maxWidth="md" sx={{ py: 8 }}>
        <Box textAlign="center">
          <Typography variant="h4" component="h2" gutterBottom>
            {t('home.readyToMaster')}
          </Typography>
          <Typography variant="body1" paragraph>
            {t('home.joinPlatform')}
          </Typography>
          <Button
            component={RouterLink}
            to={isAuthenticated ? '/dashboard' : '/register'}
            variant="contained"
            size="large"
            sx={{ mt: 2 }}
          >
            {isAuthenticated ? t('home.goToDashboard') : t('home.startLearningNow')}
          </Button>
        </Box>
      </Container>
    </Box>
  );
};

export default Home; 